<include file="Weixin/header" />
<title>设置密码</title>
</head>
<body class="clearfix">
    <div class="top-tab">
        <ul>
            <li><span class="select fontblue">待缴费</span></li>
            <li><span>已缴费</span></li>
        </ul>
    </div>
    <div class="bill tab-body">
        <div class="title">共2条待缴费账单 <span class="fontblue fr all cld">全选</span> </div>
        <div class="item">
            <div class="top">
                东原D73栋18-20
                <img src="__PUBLIC__/weixin/images/quan.png" class="slt cld" >
            </div>
            <div class="main clearfix">
                <div class="lt"><span class="head"><span>7</span>月</span></div>
                <div class="rt">
                    <h3>固定账单 <small>2018-06-14</small></h3>
                    <p>金额：<span class="je">￥120.00</span></p>
                    <p>状态：<span class="zt">未缴纳</span></p>
                </div>
            </div>
            <div class="more">
                <p>水费：￥20.00 (20吨)</p>
                <p>电费：￥3.00 (20吨)</p>
            </div>
            <div class="btn cld">详情 <img src="__PUBLIC__/weixin/images/arr1.png"></div>
        </div>

        <div class="item">
            <div class="top">
                东原D73栋18-20
                <img src="__PUBLIC__/weixin/images/quan2.png"  class="slt open">
            </div>
            <div class="main clearfix">
                <div class="lt"><span class="head"><span>7</span>月</span></div>
                <div class="rt">
                    <h3>固定账单 <small>2018-06-14</small></h3>
                    <p>金额：<span class="je">￥120.00</span></p>
                    <p>状态：<span class="zt">未缴纳</span></p>
                </div>
            </div>
            <div class="more">
                <p>水费：￥20.00 (20吨)</p>
                <p>电费：￥3.00 (20吨)</p>
            </div>
            <div class="btn cld">详情 <img src="__PUBLIC__/weixin/images/arr1.png"></div>
        </div>
        <div class="botbtn">立即缴费</div>
    </div> 

    <div class="bill tab-body hide">
        <div class="title">共2条账单信息 </div>
        <div class="item">
            <div class="top">
                东原D73栋18-20
            </div>
            <div class="main clearfix">
                <div class="lt"><span class="head"><span>7</span>月</span></div>
                <div class="rt">
                    <h3>固定账单 <small>2018-06-14</small></h3>
                    <p>金额：<span class="je">￥120.00</span></p>
                    <p>状态：<span class="zt">未缴纳</span></p>
                </div>
            </div>
            <div class="more">
                <p>水费：￥20.00 (20吨)</p>
                <p>电费：￥3.00 (20吨)</p>
            </div>
            <div class="btn cld">详情 <img src="__PUBLIC__/weixin/images/arr1.png"></div>
        </div>
        <div class="item">
            <div class="top">
                东原D73栋18-20
            </div>
            <div class="main clearfix">
                <div class="lt"><span class="head"><span>7</span>月</span></div>
                <div class="rt">
                    <h3>固定账单 <small>2018-06-14</small></h3>
                    <p>金额：<span class="je">￥120.00</span></p>
                    <p>状态：<span class="zt">未缴纳</span></p>
                </div>
            </div>
            <div class="more">
                <p>水费：￥20.00 (20吨)</p>
                <p>电费：￥3.00 (20吨)</p>
            </div>
            <div class="btn cld">详情 <img src="__PUBLIC__/weixin/images/arr1.png"></div>
        </div>
    </div>
    <script>
       $(".slt").on("touchend",function(){
           if($(this).hasClass("cld")){
               $(this).removeClass("cld");
               $(this).addClass("open");
               $(this).attr("src","images/quan2.png");
           }else{
               $(this).removeClass("open");
               $(this).addClass("cld");
               $(this).attr("src","images/quan.png");
         }
        
       })

        $(".btn").on("touchend",function(){
            if($(this).hasClass("cld")){
               $(this).removeClass("cld");
               $(this).addClass("open");
               $(this).siblings(".more").show();
               $(this).find("img").attr("src","images/arr2.png");  
            }else{
               $(this).removeClass("open");
               $(this).addClass("cld");
               $(this).siblings(".more").hide();
               $(this).find("img").attr("src","images/arr1.png");   
            }
         })

         $(".all").on("touchend",function(){
            if($(this).hasClass("cld")){
                $(this).removeClass("cld");
                $(this).addClass("open"); 
                $(this).parent(".title").siblings(".item").find(".slt").attr("src","images/quan2.png");
                $(this).parent(".title").siblings(".item").find(".slt").removeClass("cld").addClass("open");
            }else{
                $(this).removeClass("open");
                $(this).addClass("cld"); 
                $(this).parent(".title").siblings(".item").find(".slt").attr("src","images/quan.png");
                $(this).parent(".title").siblings(".item").find(".slt").removeClass("open").addClass("cld");
            }
         })
    </script>
</body>
</html>